<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>要求用动态样式做出自适应 可以百度 </title>
    <style>
        .a2 {
            transition: all 1s ease;
            overflow: hidden;
            cursor: pointer;
            
        }
        .bottomdiv {
            color: red;
        }
    </style>
</head>
<body>
 
    <div>
        <div id="app">
            <!-- v-on: @简写 -->
            <div v-on:click='change' v-bind:style="[a4]" :class="[a2]">
                {{msg}}
            </div>
            <div class="bottomdiv"> 
                我是下方的元素人的照片
                <img src="" alt="">
            </div>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        
        var vm = new Vue({
          
            el:'#app',
         
            data:{
                a2:'a2',
                a3:'active',
                a4:{
                     maxHeight:'10px'
                },
                msg:'“唐老大”多姆·托莱多（范·迪塞尔 饰）与莱蒂（米歇尔·罗德里格兹 饰）和他的儿子小布莱恩，过上了远离纷扰的平静生活。然而他们也知道，安宁之下总潜藏着危机。这一次，为了保护他所爱的人，唐老大不得不直面过去。他和伙伴们面临的是一场足以引起世界动荡的阴谋，以及一个前所未遇的一流杀手和高能车手。而这个名叫雅各布（约翰·塞纳 饰）的人，恰巧是多姆遗落在外的亲弟弟。',
                msg2:'首部4K全景声粤剧电影，取材自民间故事《白蛇传》，那白蛇的故事，远久流传...白素贞修炼千年，只为人间寻那许仙，再续兰因前缘',
                msg3:'电影介绍33333333333333333333333333333333333333333333333333333333333333'
            },
            methods:{
                change(){
                    this.a4.maxHeight='1000px'
                }
            }
        })
    
     
    

    </script>
</body>
</html>